Field Label
Description
Settings for configuring label for a data control.
Label
The text shown in the label.
Aligning Controls with a Blank Label
When a label is placed above a control, it makes the entire control container taller. When placed inline with other controls that do not have a label, the controls will align to the top of the label. Turning the label on but leaving the Label text blank will align controls as expected.
Left: Dropdown box label Position is set to "None". Right: Dropdown box label Position is set to "Above" and the Label text is blank.
Bubble help
Optional help text shown when the user hovers the mouse over the label. Bubble help can be used to add tips for how to enter information into a control. See also Has help for adding a help icon to a control.
Class
The Class property allows you to add one or more classes to the label for the control, including classes from the component's selected Web Theme. Use the 
smart field button to open the CSS class name selector to choose classes defined in the component's style, locally defined classes, or create new classes to apply to the label.
The images below show a label that has been styled using classes from the iOS7 theme.
Style
The Style property adds optional inline style attributes to the label. Use the smart field button to open the Style Editor. The Style Editor provides a UI for specifying the style properties to add to the label. It also contains a Code tab for directly adding CSS styles.
Position
Sets the position of the label relative to the control:
- Position
- Description
- Above
The label is shown above the control.
- Left
The label is shown to the left of the control.
- Below
The label is shown below the control.
- Right
The label is shown to the right of the control.
- None
No label is shown.
- Float above
If the control has no value, the label is shown in the control. When the user clicks on the control, the label animates to a position above the control. If the control contains a value, the label is positioned above the control.
You can customize floating labels using the UX component's Floating label settings.
If the Position is Left or Right, the Width determines the width of the label.
Width
The width of the control's label. The width is specified using CSS syntax (e.g. 5in, 250px.) The {Global.LabelWidth} placeholder can also be used to specify the label width. If set to {Global.LabelWidth}, the label width will be the width specified in the UX component's Label width property.
If blank, the label width will be automatically computed. In some situations, leaving a label's width blank will result in the label appearing above the control.
The width property is only shown if the Position is set to Right or Left.
The Layout type for the UX Component affects how the label and control are sized. If set to ContainerWidth, increasing the label width reduces the width of the control. See Layout type to learn more.
Alignment
The position of the text within the label.l Text can be Left, Right, or Center aligned. Only applies if the label's Position has been set to Left or Right.
If the width of the label is the same width as the text in the label, you may need to make the label wider to see the alignment change.
Videos
Floating Textbox Labels
A popular design pattern displays the label for a textbox as a watermark in the field. When the user clicks in the field to begin typing, the watermark animates into position above the textbox.
In this video, we show how animated textbox labels can be specified.